<template>
	<view>
		<navBar>
			<template slot="title">
				<view>评论</view>
			</template>
		</navBar>
		<view class="container">
			<view class="user">
				<view class="hear u-skeleton-circle">
					<image src="../../static/image/R-C.jpg" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name u-skeleton-fillet">Mian<u-icon name="level" color='#fff'
							style="background-color: #FCAD00; border-radius: 50%; padding: 3rpx;margin-left: 7rpx;"
							size='26'></u-icon></view>
					<view class="articleTime u-skeleton-fillet">
						{{Data.createTime}}
					</view>
				</view>
				<view class="focus u-skeleton-fillet">
					已关注
				</view>
			</view>
			<view class="works">
				<view class="image u-skeleton-fillet">
					<image :src="item" mode="aspectFill" v-for="(item,index) in Data.imgUrl">
					</image>
					<!-- <image src="../../static/image/comment2.jpg" mode="aspectFill"></image> -->
					<!-- <image src="../../static/image/comment3.jpg" mode="aspectFill"></image> -->
				</view>
				<view class="description">
					{{
						Data.illustrate
					}}
				</view>

				<view class="tag">
					<view class="hr"> </view>
					<u-tag text="手工" type="info" shape="circle" border-color='#F4F4F5' class="u-skeleton-fillet" />
					<u-tag text="易市集" type="info" shape="circle" border-color='#F4F4F5' class="u-skeleton-fillet" />
					<u-tag text="环保" type="info" shape="circle" border-color='#F4F4F5' class="u-skeleton-fillet" />
					<view class="hr"></view>
				</view>
				<view class="comment">
					<view class="heared">
						<text style="font-size: large;font-weight: bold;">评论</text>
						<text style="font-size: small;margin-left: 10rpx;">{{evaluations.length}}</text>
					</view>
					<view class="list">
						<view class="li" v-for="(item,index) in evaluations">
							<view class="hear u-skeleton-circle">
								<image :src="item.head" mode="aspectFill"></image>
							</view>
							<view class="info">
								<view class="name u-skeleton-fillet">
									{{item.username}}
									<!-- <u-icon name="level" color='#fff'
										style="background-color: #FCAD00; border-radius: 50%; padding: 3rpx;margin-left: 7rpx;"
										size='26'></u-icon> -->
								</view>
								<view class="articleTime ">
									{{item.articleTime}}
								</view>
								<view class="commentText u-skeleton-fillet">
									{{item.comment}}
								</view>
								<view class="reply" v-if="item.children">
									<view class="replyLi" v-for="i in item.children">
										<text style="color: #1691E0">{{i.userId}}: </text>
										<text style="font-size: small;">{{i.commentText}}</text>
									</view>
								</view>
							</view>
							<view class="focus" @click="reply(item.username,index)">
								<u-icon name='chat' size='34'></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sendComment">
				<view class="head  u-skeleton-circle">
					<image src="../../static/image/hear3.jpg" mode="aspectFill"></image>
				</view>
				<u-search placeholder="善言善语,温暖人心" v-model="sendText" :clearabled="true" :show-action="true"
					search-icon='send' class="u-skeleton-fillet" action-text='发送' :animation='true'
					@search="sendComment()" @custom='sendComment()' id="searchInput"></u-search>
				<text style="margin-left: 15rpx;" class="u-skeleton-fillet"></text>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>
<script>
	import comm from "@/comm/comm.js"
	import navBar from "@/components/navBar.vue"

	export default {
		components: {
			navBar,
		},
		data() {
			return {
				replyIndex: null, // 回复的index
				currentUserName: 'Charlie', // 当前用户名
				loading: true, // 是否显示骨架屏组件
				Data: {}, // 文章数据
				sendText: '', // 发送评论的内容
				// 评论数据
				evaluations: [{
						id: 1,
						username: 'Alice',
						comment: 'Great work! I love the creativity in your design.',
						rating: 5,
						head: '../../static/image/R-C.jpg'
					},
					{
						id: 2,
						username: 'Bob',
						comment: 'Very impressive. The attention to detail is amazing.',
						rating: 4,
						head: '../../static/image/hear2.jpg'
					},
					{
						id: 3,
						username: 'Charlie',
						comment: 'Good effort. Could use some improvements in usability.',
						rating: 3,
						head: '../../static/image/hear3.jpg'
					}
				]
			}
		},

		async onLoad(option) {


			// 请求文章数据
			var url = `/works/${option.id}`;
			let method = 'GET';
			let data = {};

			//请求的数据，如果没有数据可传空对象{}
			await comm.request(url, method).then(({
				data
			}) => {
				let res = data.data
				res.imgUrl = res.imgUrl.split(',')
				res.createTime = comm.formattedDateStr(res.createTime, false)
				this.Data = res
			});

			// 请求文章评论数据
			var url = `/comment/${option.id}`;
			//请求的数据，如果没有数据可传空对象{}
			await comm.request(url, method).then(({
				data
			}) => {
				uni.hideLoading()
				let res = data.data
				res.forEach((item, index) => {
					item.head = this.evaluations[index].head
					item.username = this.evaluations[index].username
					item.comment = item.commentText
					item.articleTime = comm.formattedDateStr(item.commentTime).slice(5)
				})
				this.evaluations = res
				console.log(this.evaluations);
				this.loading = false;
			})


		},
		methods: {
			/**
			 * @param {Object} currentsername 当前用户名字
			 */
			reply(currentUsername, index) {
				console.log(currentUsername, index);

				let inputElement = document.querySelector('.uni-input-input');
				console.log(inputElement);
				inputElement.focus();
				this.replyIndex = index
				// this.sendComment(currentUsername, index)

			},

			/**
			 * 发送评论
			 */
			sendComment() {
				// 回复
				if (this.replyIndex != null) {
					let text = {
						id: 3,
						userId: this.currentUserName,
						commentText: this.sendText,
						rating: 3,
						head: '../../static/image/hear3.jpg',
						articleTime: comm.formattedDateStr('', true).slice(5),
						children: []
					}

					this.evaluations[this.replyIndex].children == false ? this.evaluations[this.replyIndex].children = [] :
						this.evaluations[this.replyIndex].children = this.evaluations[this.replyIndex].children
					console.log(this.evaluations[this.replyIndex]);
					this.evaluations[this.replyIndex].children.unshift(text)
					this.replyIndex = null
					this.sendText = ''
				} else {
					console.log(2);
					// 评论
					let text = {
						id: 3,
						username: this.currentUserName,
						comment: this.sendText,
						rating: 3,
						head: '../../static/image/hear3.jpg',
						articleTime: comm.formattedDateStr('', true).slice(5),
						children: false
					}
					this.evaluations.unshift(text)
					console.log(this.evaluations);
					// 重置输入框
					this.sendText = ''
				}
			}

			,
			/**
			 * 图片放大
			 * @param {Object} item img路径
			 */
			showPopup(item) {
				uni.previewImage({
					urls: [item],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.container {
		width: 100vw;
		min-height: 100vh;
		height: 100%;
		background: #EFFAEC;
		padding: 30rpx;
		padding-bottom: 88rpx;

		.user {
			display: flex;
			height: 100rpx;
			align-items: center;

			.hear {

				width: 100rpx;
				height: 100rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.info {
				flex: 1;
				margin-left: 20rpx;

				.articleTime {
					width: 300rpx;
					height: 50rpx;
					color: $uni-text-color-grey;
					font-size: small;
				}

				.name {
					width: 100rpx;
					display: flex;
					align-items: center;
					font-weight: bold;
				}
			}

			.focus {
				border: 1px solid #6BA8FF;
				padding: 5rpx 10rpx;
				color: #6BA8FF;
				border-radius: 20rpx;
			}
		}


		.works {
			margin-top: 30rpx;
			padding-bottom: 50rpx;

			.image {
				width: 100%;
				min-height: 500rpx;

				image {
					width: 100%;
					height: 500rpx;
				}
			}

			.description {
				text-indent: 2em;
				line-height: 1.7;
			}

			.tag {
				margin: 10rpx 0;

				.hr {
					width: 100%;
					height: 1px;
					background-color: #E3E5E7;
				}

				.u-tag {
					margin: 25rpx 15rpx;
					font-size: 24rpx;
				}
			}

			.comment {

				.heared {
					margin: 10rpx 0;
				}

				.list {

					.li {
						margin: 20rpx 0;
						display: flex;
						border-bottom: #E3E5E7 solid 1px;

						.hear {

							width: 80rpx;
							height: 80rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.info {
							flex: 1;
							margin-left: 20rpx;

							.articleTime {
								height: 50rpx;
								color: $uni-text-color-grey;
								font-size: smaller;
							}

							.name {
								height: 50rpx;
								display: flex;
								align-items: center;
								font-weight: bold;
							}

							.commentText {
								padding-bottom: 15rpx;
							}

							.reply {
								padding: 15rpx;
								background: #E3EAF5;
								width: 105%;
								margin-bottom: 15rpx;
								padding-bottom: 5rpx;

								.replyLi {
									width: 100%;
									margin-bottom: 10rpx;
								}

								.replyLi:nth-last-of-type() {
									margin-bottom: 0;
								}

							}

						}

						.focus {}

					}
				}
			}
		}

		.sendComment {
			width: 95%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			background: #EFFAEC;

			.head {
				width: 60rpx;
				height: 60rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
	}
</style>